<template>
  <div class="login-container">
    <div class="w-100 h-100 over-hidden">
      <div class="p-3">
        <logo-component :projectName="titleObj.projectName"/>
      </div>
      <div class="w-100 h-100 d-flex align-center justify-content-center mt-4">
        <div class="logo-container d-flex align-center justify-content-center">
          <div class="box-image">
            <div class="box-card2"></div>
          </div>
          <div class="box-card">
            <el-form
              ref="loginFormRef"
              :rules="loginRules"
              :model="loginData"
              class="login-form"
            >
              <div class="flex text-black items-center">
                <div class="text-2xl flex-1 text-center title">
                  欢迎登录系统
                  <div class="bottom-line"></div>
                </div>
              </div>
              <div class="login-content">
                <!-- 用户名称 -->
                <el-form-item prop="accountPhone">
                  <div class="p-2">
                    <svg-icon style="color: #3276ff;" icon-class="user"/>
                  </div>
                  <el-input
                    class="d-flex align-items-center"
                    ref="username"
                    size="large"
                    v-model="loginData.accountPhone"
                    placeholder="输入用户名"
                    name="username"
                  />
                </el-form-item>

                <el-tooltip
                  :disabled="isCapslock === false"
                  content="Caps lock is On"
                  placement="right"
                >
                  <el-form-item prop="accountPassword">
                  <span class="p-2">
                    <svg-icon style="color: #3276ff;" icon-class="password"/>
                  </span>
                    <!-- 密码 -->
                    <el-input
                      class="d-flex align-items-center"
                      v-model="loginData.accountPassword"
                      placeholder="密码"
                      :type="passwordVisible === false ? 'password' : 'input'"
                      size="large"
                      name="password"
                      @keyup.native="checkCapslock"
                      @keyup.enter.native="handleLogin"
                    />
                    <span class="mr-2 d-flex align-items-center" @click="passwordVisible = !passwordVisible">
                    <svg-icon
                      :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
                      style="color: #3276ff;"
                      class="text-gray cursor-pointer"
                    />
                  </span>
                  </el-form-item>
                </el-tooltip>
                <el-button
                  size="default"
                  :loading="loading"
                  class="w-full mt-3"
                  @click.prevent="handleLogin"
                >登录
                </el-button>
              </div>
            </el-form>
          </div>
        </div>
      </div>
    </div>

    <!-- 重置密码弹框 -->
    <global-message-box
      v-if="isMessageBoxShow"
      @messageBoxSave="messageBoxSave"
      @messageBoxReceive="isMessageBoxShow = false"
    >
      <template #content>
        <div class="messageBoxContent">
          <el-form ref="form" :model="resetForm">
            <el-form-item>
              <span class="p-2">
                <svg-icon icon-class="password"/>
              </span>
              <el-input
                v-model="resetForm.onePassword"
                placeholder="请输入密码"
                class="d-flex align-items-center"
                :type="resetOnePasswordVisible === false ? 'password' : 'input'"
              />
              <span
                class="mr-2 d-flex align-items-center"
                @click="resetOnePasswordVisible = !resetOnePasswordVisible"
              >
                <svg-icon
                  :icon-class="resetOnePasswordVisible === false ? 'eye' : 'eye-open' "
                  class="text-gray cursor-pointer"
                />
              </span>
            </el-form-item>
            <el-form-item>
              <span class="p-2">
                <svg-icon icon-class="password"/>
              </span>
              <el-input
                v-model="resetForm.twoPassword"
                placeholder="请再次却密码"
                class="d-flex align-items-center"
                @keyup.enter.native="messageBoxSave"
                :type="resetTwpPasswordVisible === false ? 'password' : 'input'"
              />
              <span
                class="mr-2 d-flex align-items-center"
                @click="resetTwpPasswordVisible = !resetTwpPasswordVisible"
              >
                <svg-icon
                  :icon-class="resetTwpPasswordVisible === false ? 'eye' : 'eye-open'"
                  class="text-gray cursor-pointer"
                />
              </span>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </global-message-box>
  </div>
</template>

<script>
  import { passwordValidator } from "./validator"
  import { updateLAccount, updateAccountPwd } from "@/api/userControl/account"
  import { queryLoginInfo } from "@/api/user"
  import logoComponent from "@/components/LoginLogo"

  export default {
    name: "login",
    components: {
      logoComponent
    },
    data() {
      return {
        loading: false,
        isCapslock: false,
        passwordVisible: false,
        resetOnePasswordVisible: false,
        resetTwpPasswordVisible: false,
        isMessageBoxShow: false,
        captchaBase64: "",
        passwordCheckbox: [],
        loginData: {
          accountPhone: 18800000000,
          accountPassword: "888888",
          projectCode: ""
        },
        loginRules: {
          accountName: [{ required: true, trigger: "blur" }],
          accountPassword: [
            { required: true, trigger: "blur", validator: passwordValidator }
          ]
        },
        // 重置密码form,
        resetForm: {
          onePassword: "",
          twoPassword: ""
        },
        titleObj: {}
      }
    },
    async created() {
      if (!this.$route.query.projectRef) {
        this.$message({
          message: "非法连接 无法登陆！",
          type: "warning"
        })
      } else {
        localStorage.setItem('projectRef', this.$route.query.projectRef)
        await this.queryLoginInfo()
      }
    },
    methods: {
      async queryLoginInfo() {
        await this.$http.get("/puser/queryMessageByProjectCode", {
          params: {
            projectRef: this.$route.query.projectRef
          }
        }).then(res => {
          if (res.data.status == "200") {
            this.titleObj = res.data.object
          } else {
            this.$message({
              message: res.data.message,
              type: "error"
            })
          }
        })
      },
      /**
       * 检查输入大小写状态
       */
      checkCapslock(e) {
        const { key } = e
        this.isCapslock = key && key.length === 1 && key >= "A" && key <= "Z"
      },
      handleLogin() {
        if (!this.$route.query.projectRef) {
          this.$message({
            message: "非法连接 无法登陆！",
            type: "warning"
          })
          return
        }

        this.$refs.loginFormRef.validate((valid) => {
          if (valid) {
            this.loading = true
            this.loginData.projectCode = this.titleObj.projectCode
            this.$store.dispatch("user/login", this.loginData).then((show) => {
              if (show) {
                this.isMessageBoxShow = show
              } else {
                // const query = this.$route.query
                // const redirect = query.redirect ?? "/"
                //
                // // todo query参数
                // const otherQueryParams = Object.keys(query).reduce(
                //   (acc, cur) => {
                //     if (cur !== "redirect") {
                //       acc[cur] = query[cur]
                //     }
                //     return acc
                //   },
                //   {}
                // )
                //
                // this.$router.push({ path: redirect, query: otherQueryParams })
                localStorage.setItem('projectRef', this.$route.query.projectRef)
                this.$router.push({ path: "/chart" })
              }
            }).catch(() => {
                // 验证失败，重新生成验证码
                // getCaptcha();
              })
              .finally(() => {
                this.loading = false
              })
          }
        })
      },
      messageBoxSave() {
        if (this.resetForm.onePassword == this.resetForm.twoPassword) {
          this.$refs.form.validate((valid) => {
            if (valid) {
              updateAccountPwd({
                accountPhone: this.loginData.accountPhone,
                accountPassword: this.resetForm.onePassword,
                projectCode: this.titleObj.projectCode
              }).then(res => {
                if (res.status == "200") {
                  // const query = this.$route.query
                  // const redirect = query.redirect ?? "/"
                  //
                  // // todo query参数
                  // const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
                  //   if (cur !== "redirect") {
                  //     acc[cur] = query[cur]
                  //   }
                  //   return acc
                  // }, {})
                  localStorage.setItem('projectRef', this.$route.query.projectRef)
                  this.$router.push({ path: "/chart" })
                }
              })

            }
          })
        } else {
          this.$message({
            message: "两次密码输入不一致！",
            type: "warning"
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-container {
    position: relative;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background: url("../../assets/login/login-bg.png") no-repeat;
    background-size: 100% 100%;
    padding: 50px 50px 50px 70px;
    box-sizing: border-box;

    .logo-container {
      /*border: 1px solid #ffffff;*/
      /*border-radius: 21px;*/
      /*box-shadow: 0px 0px 4px 4px rgba(165, 172, 186, 0.24);*/
      width: 70%;

      .box-image {
        width: 55%;
        height: 100%;

        .box-card2 {
          display: inline-block;
          width: 100%;
          height: 600px;
          background: url("../../assets/login/login.png") no-repeat;
          background-size: 100% 100%;
        }
      }

      .box-card {
        width: 45%;
        height: 600px;
        border-top-right-radius: 21px;
        border-bottom-right-radius: 21px;
        background-color: #ffffff;

        .title {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding-bottom: 30px;
          font-size: 22px;
          font-weight: 500;
          color: #4A4A4A;

          .bottom-line {
            width: 42px;
            height: 4px;
            margin-top: 12px;
            background: #053feb;
          }
        }

        .login-form {
          width: 520px;
          max-width: 100%;
          padding-top: 100px;
          margin: 0 auto;
          overflow: hidden;

          .captcha {
            position: absolute;
            top: 0;
            right: 0;

            img {
              width: 120px;
              height: 48px;
              cursor: pointer;
            }
          }
        }

        .login-content {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .checkbox {
            .el-form-item {
              background: transparent;
              border-radius: 5px;
            }
          }

          .w-full {
            width: 408px;
            height: 53px;
            background-color: #3276FF;
            border: 2px solid #3276FF;
            color: #ffffff;
          }
        }
      }
    }


    .messageBoxContent {
      width: 100%;
      height: 100%;

      ::v-deep.el-input__inner {
        color: #989898;
        background: transparent;
        border: 0;
        border-radius: 0;
        caret-color: #989898;

        &:-webkit-autofill {
          box-shadow: 0 0 0 1000px transparent inset !important;
          -webkit-text-fill-color: #fff !important;
        }

        &:-webkit-autofill,
        &:-webkit-autofill:hover,
        &:-webkit-autofill:focus,
        &:-webkit-autofill:active {
          transition: color 99999s ease-out, background-color 99999s ease-out;
          transition-delay: 99999s;
        }
      }
    }
  }

  .el-form-item {
    width: 418px;
    // background: rgb(0 0 0 / 10%);
    background: #f1f4f8;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 5px;
    padding: 0 10px;

    ::v-deep.el-form-item__content {
      display: flex;
    }
  }

  .el-input {
    background: transparent;
  }

  .login-content {
    ::v-deep.el-input__inner {
      color: #989898;
      background: transparent;
      border: 0;
      border-radius: 0;
      caret-color: #989898;

      &:-webkit-autofill {
        box-shadow: 0 0 0 1000px transparent inset !important;
        -webkit-text-fill-color: #fff !important;
      }

      &:-webkit-autofill,
      &:-webkit-autofill:hover,
      &:-webkit-autofill:focus,
      &:-webkit-autofill:active {
        transition: color 99999s ease-out, background-color 99999s ease-out;
        transition-delay: 99999s;
      }
    }
  }
</style>
